import { PageContainer } from '@ant-design/pro-layout';
import 'dayjs/locale/zh-cn';
import React, { useState } from 'react';
import { useAccess } from 'umi';
import TableActive from '../active/components/TableActive';
import TableSubmit from '../submit/components/TableSubmit';
import DetailsTopic from '../topic/components/DetailsTopic';
import TableAdopt from './components/TableAdopt';

type DetailsType = {
  id: string;
  name: string;
};

export default (): React.ReactNode => {
  const access = useAccess();

  const [visible, setVisibleState] = useState<string>('manage');
  const [visibleData, setVisibleDataState] = useState<DetailsType>();

  const onBack = () => {
    setVisibleState('manage');
  };

  const onDetails = (id: string, name: string) => {
    setVisibleState('details');
    setVisibleDataState({ id, name });
  };

  const [activeKey, setActiveKey] = useState<string>('submit');

  // const container = () => {
  //   if (visible === 'manage') {
  //     return (

  //     );
  //   } else if (visible == 'details') {
  //     return <DetailsTopic onBack={onBack} id={visibleData?.id} name={visibleData?.name} />;
  //   } else {
  //     return <></>;
  //   }
  // };

  return (
    <PageContainer
      header={{
        breadcrumb: {},
      }}
      subTitle=""
    >
      <TableAdopt onDetails={onDetails} />
    </PageContainer>
  );
};
